import React, { PureComponent} from 'react'
import PropTypes from 'prop-types';
import TestItem from './testItem'
//加载action
import {selUserAll} from '../../../actions/testAction';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';


import {
    Text,
    View,
    ListView,
    RefreshControl,                         //刷新小组件
    ActivityIndicator                       //底部刷新小组件
  } from 'react-native';
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => {r1 !== r2}});//listView 数据判断方式
class TestList extends PureComponent {
      
    static navigationOptions = { 
        title: 'ListView示例页',
        cardStack: {
            gesturesEnabled: true
        }
    }

    constructor(props) {
        super(props);
        this.state = {
              uploading:true, //下拉刷新按钮状态 (初始化加载时处在loading状态)
              dwloading:false, //上拉刷新按钮状态
            }
        this.isFirst =true                         //页面第一次加载
    }
    
    //加载后渲染页面

    componentDidMount(){
        const {actions} = this.props;
        actions.selUserAll({page:1}); //初始化查询
    }
        
    render() {
        //获取用户列表数据及是否等待状态
        const {userList,isloading} = this.props.userData.data;
        //创建listView数据源
        const dataSource = ds.cloneWithRows(userList)
        return (
            <View style={{paddingTop: 22}}>
                <ListView
                refreshControl = {
                    <RefreshControl  
                        refreshing={this.state.uploading&&this.props.userData.isloading}  
                        onRefresh={this._onRefresh.bind(this)}  
                    />
                }
                    enableEmptySections={true}
                    dataSource={dataSource}
                    renderRow={this.renderRow.bind(this)}
                    onEndReachedThreshold={1}//滚动临界值（到达后执行onEndReached）
                    onEndReached={this.onEndReached.bind(this)}
                    renderFooter={this.renderFooter.bind(this)}
                />
            </View>
          );
    }
    


    //刷新隐藏按钮
    componentDidUpdate(){
        if(this.state.uploading&&!this.props.userData.isloading){
            this.setState({
                uploading:false //下拉刷新按钮状态：隐藏
            })
        }
        if(this.state.dwloading&&!this.props.userData.isloading){
            this.setState({
                dwloading:false //上拉刷新按钮状态：隐藏
            })
        }
    }

    //下拉刷新开始
    _onRefresh(){
        this.props.userData.isloading = true //设置为加载状态
        const {actions} = this.props;
        actions.selUserAll({page:1});
        this.setState({
            uploading:true //下拉刷新按钮状态：显示
        });
    }

    onEndReached(){
        if(!this.isFirst&&!this.props.userData.isloading){
            const {userList,page,pages} = this.props.userData.data;
            if(page!=pages){//不等于最后一页加载
                const {actions} = this.props;
                actions.selUserAll({page:page+1});
                this.props.userData.isloading = true;      
                this.setState({
                    dwloading:true //下拉刷新按钮状态 显示
                })
            }
        }else{
            this.isFirst = false;
        }
    }
    

    renderFooter(){
        if(!this.props.userData.ret){
            //console.log("请求失败");
        }
        if(this.state.dwloading){
            return (<View style={{marginVertical: 10}}>
                    <ActivityIndicator
                    animating={true}
                    style={{height: 10,alignItems: 'center',justifyContent: 'center',padding: 1,}}
                    size="small" />
            </View>);
        }
        if(this.state.uploading){
            return (<View style={{marginVertical: 10,height:100,alignItems: 'center',justifyContent: 'flex-end'}}>
                <Text>玩命加载ing</Text>
            </View>);
        }
        return (<View style={{marginVertical: 10}}>
        </View>);
    }

    //list子项加载方法
    renderRow(rowData){
        return (
        <TestItem 
            detail={rowData} 
            navigation = {this.props.navigation}
        />
        )
    }
}

//组合action
var actions = {
    selUserAll
}
//连接state到props
const mapStateToProps = state => {
    return{
        userData: state.selUserAllReducer
    }
}
//连接action
const mapDispatchToProps = (dispatch) =>{
    return{
        actions:bindActionCreators(actions,dispatch)
    }
}
//导出组合好的组件(组合后状态改变重新渲染组合组件的页面)
export default connect(
    mapStateToProps,mapDispatchToProps
)(TestList);



//复杂数据类型验证（示例，可省略，尽量具化到单个组件的状态）
TestList.propTypes = {
    userData:PropTypes.shape({
        userList:PropTypes.arrayOf(
            PropTypes.shape({
                id:PropTypes.number,
                name: PropTypes.string,
                pwd:PropTypes.string,
                phone: PropTypes.string
            })
        ),
        user:PropTypes.shape({
            id:PropTypes.number,
            name: PropTypes.string,
            pwd:PropTypes.string,
            phone: PropTypes.string
        })
    })
};